<template>
  <div class="bottom-bar">
    <div class="price-box">
      <template v-if="unifiedAmount">
        <div class="item">
          您需支付
          <span class="price">{{ unifiedAmount.finalAmount }}</span>
        </div>
        <div class="item">
          已优惠
          <span>￥{{ unifiedAmount.discountAmount }}</span>
        </div>
      </template>
    </div>
    <div class="btn active" @click="placeOrder()">
      <div>去支付</div>
      <div class="text">
        {{ dateInfo.startDate2 }}-{{ dateInfo.endDate2 }} 共{{ dateInfo.roomNight }}晚
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { redirect } from '@/utils/page'
import { useUserStore } from '@/store/user'
import { msgNone, msgSuccess, wxPay } from '@/utils/index'
defineOptions({ name: 'BottomBar' })

const props = defineProps(['hotel', 'dateInfo', 'unifiedAmount', 'occupant'])

// 下单
const orderInfo = ref(null)
function placeOrder() {
  const { userInfo } = useUserStore()
  if (props.occupant && props.occupant.id) {
    uni.showLoading()
    http
      .post('/room-order-app/unifiedOrder', {
        openid: userInfo.openid,
        layoutId: props.hotel.id,
        finalAmount: props.unifiedAmount.finalAmount,
        enterDate: props.hotel.enterDate,
        leaveDate: props.hotel.leaveDate,
        registerIds: [props.occupant.id],
      })
      .then((res: any) => {
        orderInfo.value = res
        if (res && res.extData) {
          const { timeStamp, nonceStr, packageVal, signType, paySign } = res.extData
          wxPay({
            timeStamp,
            nonceStr,
            package: packageVal,
            signType,
            paySign,
          })
            .then((res2) => {
              msgSuccess('支付成功').then(() => {
                goDetail()
              })
            })
            .catch(() => {
              msgNone('支付失败').then(() => {
                goDetail()
              })
            })
            .finally(() => {
              uni.hideLoading()
            })
        }
      })
      .catch(() => {
        uni.hideLoading()
      })
  } else {
    msgNone('请选择入住人')
  }
}

// 如果有订单信息，说明已经下单了，直接跳转订单详情
onShow(() => {
  goDetail()
})

function goDetail() {
  if (orderInfo.value) {
    redirect(`/pages-sub/hotel/order/index?id=${orderInfo.value.orderId}`)
  }
}
</script>
<style lang="scss" scoped>
.bottom-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 127rpx;
  padding: 0px 30rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom)) !important;
  padding-bottom: calc(env(safe-area-inset-bottom)) !important;
  background: #ffffff;
  box-shadow: 0px -7rpx 23rpx rgba(#a6a6a6, 0.1);

  .price-box {
    flex: 1;
    .item {
      font-size: 23rpx;
      line-height: 46rpx;
      color: var(--color2);
      .price {
        font-size: 38rpx;
        font-weight: 700;
        color: var(--color1);
        &::before {
          font-size: 23rpx;
          content: '￥';
        }
      }
    }
  }
  .btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 304rpx;
    height: 92rpx;
    font-size: 30rpx;
    font-weight: 700;
    color: #fff;
    text-align: center;
    background: var(--color1);
    border-radius: 50rpx;
    box-shadow: 0px 17rpx 29rpx rgba(#1f2026, 0.3);
    div {
      line-height: 36rpx;
    }
    .text {
      font-size: 23rpx;
      font-weight: 500;
      line-height: 32rpx;
    }
  }
}
</style>
